<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <!-- 渲染新数组lis -->
    <li :class="{ completed: item.isDone }" v-for="item in lis" :key="item.id">
      <div class="view">
        <input @click="zhuang(item.id,item.isDone)" v-model="item.isDone" class="toggle" type="checkbox" />
        <label>{{ item.name }}</label>
        <button class="destroy" @click="shanch(item.id)"></button>
      </div>
    </li>
  </ul>
</template>

<script>
// 导入复制函数
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {

  computed: {
    // 解析lsit和计算属性lst
    ...mapState(['list']),
    ...mapGetters(['lis'])
  },
  methods: {
    // 辅助函数解析方法
    ...mapMutations(['shanchu', 'zh']),
    // 删除并且调用mutation里面定义的shanchu方法传入id
    shanch (id) {
      console.log(1)
      this.shanchu({ id: id })
    },
    // 点击这个会把小选框的id和状态传过去调用zh方法修改状态
    zhuang (ia, z) {
      this.zh({
        ia,
        z
      })
    }
  }

}
</script>
